<template>
	<view class="homeLayout">
		<z-paging ref="paging" v-model="dataList" @query="queryList" 
		:paging-class="{'padding-bottom': '120rpx'}"
		:default-page-size="4"
		:auto="false"
		>
			<view slot='top' class="head">
				<home-head></home-head>
			</view>
			<view slot='top' class="cardBox">
				<view class="topText">总览</view>
				<view class="allContent">
					<!-- <view class="left"></view>
					<view class="right"></view> -->
					
					
					<view class="allContentItem">
						<view class="itemText" @click="change">成本总额(元)</view>
						<view class="itemNum">200000000.00</view>
					</view>
					<view class="allContentItem">
						<view class="itemText">剩余成本(元)</view>
						<view class="itemNum">99999</view>
					</view>
					<view class="allContentItem">
						<view class="itemText">持仓总额(元)</view>
						<view class="itemNum">9999999</view>
					</view>
					<view class="allContentItem">
						<view class="itemText">持仓总重量(克)</view>
						<view class="itemNum">99999</view>
					</view>
					<view class="allContentItem">
						<view class="itemText">累计手续费(元)</view>
						<view class="itemNum">87878</view>
					</view>
					<view class="allContentItem">
						<view class="itemText">累计收益(元)</view>
						<view class="winNum">999999</view>
					</view>
				</view>
			</view>
			<view slot='top' class="mxText">账簿明细</view>
			<view class="cardBoxTm">
				
				<view class="zpBox">
					<zp-box v-for="(item,index) in dataList" :key="index" :costData="item"></zp-box>
					<!-- <view v-for="(item,index) in dataList">
						
					</view> -->
					<!-- <view class="item" v-for="(item, index) in dataList" :key="index">{{item}}</view> -->
					
					<!-- <zp-box></zp-box>
					<zp-box></zp-box> -->
					<!-- <view class="zpItem">
						<view class="zpbt">浙商积存金</view>
						
					</view>
					<view class="zpItem">
					<view class="zpbt">工商积存金</view>
					
						
					</view> -->
					
				</view>
				
			</view>
		<!-- <view>
			<button v-if="!isLogin" type="primary" @tap="handleWechatLogin">微信一键登录</button>
		</view> -->
		<!-- 授权按钮 -->
		<!-- <button v-if="!userInfo" @click="onGetUserProfile" class="auth-btn">
			授权登录
		</button> -->
		<view slot='bottom' class="bottomBox"></view>
		</z-paging>
		<tabbar @updateData="relodData"></tabbar>
	</view>
</template>

<script>
	import homeHead from '../../components/home-head/home-head.vue'
	import zpBox from '@/components/zp-box/zp-box.vue'
	import tabbar from '@/components/custom-tab-bar/custom-tab-bar.vue'
	const costObj = uniCloud.importObject("costObj")
	export default {
		components: {
			homeHead,
			zpBox,
			tabbar
		},
		data() {
			return {
				userInfo: null,
				userData: [],
				dataList: [],
				// isLogin: false
			}
		},
		async onLoad() {
			
			if(!this.isLogin) {
				uni.showLoading({
					title: '加载中'
				});
				let succFlag = await this.$store.dispatch("restoreLoginState")
				if(succFlag) {
					this.queryList(1, 4)
				}
			}
			
			// this.isLogin = this.$store.getters.getIsLogin;
		},
		created() {
			
		},
		onPageScroll : function(e) { //nvue暂不支持滚动监听，可用bindingx代替
			console.log("滚动距离为：" + e.scrollTop);
		},
		computed: {			
			isLogin() {
				const flag = this.$store.getters.getIsLogin;
				console.log("登录状态：", flag);
				return flag;
			},
			openid() {
				return this.$store.getters.getOpenId
			}
			
		},
		methods: {
			relodData() {
				this.queryList(1, 4)
			},
			async queryList(pageNo, pageSize) {
				this.$nextTick(async () => {
					console.log(this.isLogin);
					const queryParam = {pageNo: pageNo, pageSize: pageSize, openid: this.openid}
					try{
						const res = await costObj.getList({pageNo,pageSize,openid: this.openid})
						console.log('res=====', res);
						this.$refs.paging.complete(res.data)
					}catch(e){
						//TODO handle the exception
						this.$refs.paging.complete(false)
						if(e.errCode === 400){
							this.$store.commit('SET_TABBAR_INDEX', {current: 1})
							uni.switchTab({
								url: '/pages/demo/demo'
							})
						}
					}
				})
			
			},
			change() {
				uni.switchTab({
					url:"/pages/demo/demo"
				})
			},
			// queryList(pageNo, pageSize) {
			// 	console.log(pageNo, pageSize);
			// 	setTimeout(() => {
			// 		this.$refs.paging.complete([1,2,3,5,5,5,5,5,5])
			// 	}, 500)
			// },
			onGetUserProfile() {
				this.$store.dispatch("restoreLoginState");
				
			},
			async handleWechatLogin() {
				this.$store.dispatch("login");	
			},

		}
	}
</script>

<style lang="scss" scoped>
	.homeLayout {
		.bottomBox {
			height: 130rpx;
		}
		
		padding-left: 15rpx;
		padding-right: 15rpx;
		height: 100vh;
		display: flex;
		flex-direction: column;
		// background: linear-gradient(to top right, #fff, #FFFACD, #FFDEAD);
		
		background:
			linear-gradient(to bottom, transparent, #EFEFF4 600px),
			radial-gradient(90% 300px at left top, #FFDEAD, transparent),
			radial-gradient(60% 300px at right top, #f9c74f, transparent);

		// background:
		// 	linear-gradient(to bottom, transparent, #fff 460px),
		// 	radial-gradient(20% 150px at 70% 230px, rgba(0, 210, 255, 0.2), transparent),
		// 	radial-gradient(40% 180px at 80% 50px, rgba(249, 167, 176, 0.3), transparent),
		// 	radial-gradient(50% 300px at 90% 100px, rgba(212, 230, 241, 0.8), transparent),
		// 	radial-gradient(20% 150px at 0px 0px, rgba(162, 213, 239, 0.5), transparent),
		// 	radial-gradient(30% 200px at 100px 50px, rgba(249, 167, 176, 0.5), transparent),
		// 	#FFF0F5;
		// background:
		// 	linear-gradient(to bottom, transparent, #fff 460px),
		// 	radial-gradient(20% 150px at 70% 230px, rgba(0, 210, 255, 0.2), transparent),
		// 	radial-gradient(40% 180px at 80% 50px, rgba(255, 215, 0, 0.3), transparent),
		// 	radial-gradient(50% 300px at 90% 100px, rgba(212, 230, 241, 0.8), transparent),
		// 	radial-gradient(20% 150px at 0px 0px, rgba(238, 180, 34, 0.5), transparent),
		// 	radial-gradient(30% 200px at 100px 50px, rgba(249, 167, 176, 0.5), transparent),
		// 	#FDF5E6;
			// #FFF0F5;
		.head {
			// height: 350rpx;
		}

		.cardBox {
			// border: 1rpx solid rebeccapurple;
			padding-left: 15rpx;
			padding-right: 15rpx;
			height: 310rpx;
			background: transparent;
			border-radius: 30rpx;
			// box-shadow: 
			// -15rpx -15rpx 15rpx rgba(255, 255, 255, 0.4),
			// 15rpx 15rpx 15rpx rgba(0, 0, 0, 0.1);
			// backdrop-filter: blur(10rpx)
			transition: 0.3s ease;
			
			// flex: 1;
			/* margin-top: 15rpx;
			width: 100%;
			height: 300rpx;
			// margin: 20px;
			display: inline-block;
			background: rgba(255, 255, 255, 0.4);
			// background-color: #0000ff;
			box-shadow: 5px 5px 10px 0px rgba(192, 192, 192, 0.4);
			border-radius: 30rpx;
			transition: 0.3s ease; */

			/* 添加过渡动画 */
			// transition: box-shadow 0.3s ease; /* 添加过渡动画 */
			.topText {
				// border: 1px solid rebeccapurple;
				text-align: center;
				font-size: 40rpx;
				font-weight: bolder;
				// border-radius: 50%;
				background: linear-gradient(to top right, #8B4500, #000000);
				-webkit-background-clip: text;
				/* 文字裁剪 */
				color: transparent;
				/* 设置文字颜色为透明 */
			}

			.allContent {
				height: 230rpx;
				border-radius: 30rpx;
				background: #fff;
				// box-shadow:
				// -5rpx -5rpx 5rpx rgba(0, 0, 0, 0.1),
				// 5rpx 5rpx 5rpx rgba(0, 0, 0, 0.1);
				margin-top: 10rpx;
				padding-left: 20rpx;
				padding-right: 20rpx;
				display: grid;
				// grid-template-columns: repeat(auto-fill, minmax(150rpx,205rpx));
				grid-template-columns: repeat(3, 1fr);
				// grid-template-columns: 3fr 1fr;
				gap: 5rpx;
				
				.left{
					// border: 1rpx solid red;
					// border-radius: 30rpx;
					// background: linear-gradient(to top right, #ffe0b2, #ffcc80);
				}
				
				.right{
					// border: 1rpx solid red;
				}
				
				
				.allContentItem{
					// margin-top: 15rpx;
					height: 100rpx;
					background: transparent;
					border-radius: 30rpx;
					// border: 1rpx solid red;
					// box-shadow:
					// -5rpx -5rpx 5rpx rgba(255, 255, 255, 0.4),
					// 15rpx 15rpx 15rpx rgba(0, 0, 0, 0.1);
					/* box-shadow: 
					-15rpx -15rpx 15rpx rgba(255, 255, 255, 0.4),
					15rpx 15rpx 15rpx rgba(0, 0, 0, 0.1); */
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					
					.itemText {
						font-size: 25rpx;
						color: #9B9C9E;
						// font-weight: bolder;
						// background: linear-gradient(to top right, #8B4500, #000000);
						// -webkit-background-clip: text;
						// color: transparent;
						// font-weight: bolder;
					}
					
					.itemNum {
						width: 100%;
						text-align: center;
						// background: linear-gradient(to top right, #8B4500, #000000);
						// -webkit-background-clip: text;
						// color: transparent;
						font-size: 35rpx;
						font-weight: bolder;
						// color: #363636;
					}
					
					
				}
			}
		}
		.mxText{
			// border: 1rpx solid red;
			// text-align: center;
			font-size: 40rpx;
			text-align: center;
			font-weight: bold;
			// border-radius: 50%;
			background: linear-gradient(to top right, #8B4500, #000000);
			-webkit-background-clip: text;
			/* 文字裁剪 */
			color: transparent;
		}
		.cardBoxTm {
			flex: 1;
			padding-left: 15rpx;
			padding-right: 15rpx;
			// padding-bottom: 120rpx;
			// margin-top: 30rpx;
			background: transparent;
			border-radius: 30rpx;
			// box-shadow: 
			// -15rpx -15rpx 15rpx rgba(255, 255, 255, 0.2) inset,
			// 15rpx 15rpx 15rpx rgba(0, 0, 0, 0.1) inset;
			// transition: 0.3s ease;
			
			/* padding: 10rpx;
			box-shadow: 5px 5px 10px 0px rgba(192, 192, 192, 0.4);
			border-radius: 30rpx;
			transition: 0.3s ease;
			flex: 1;
			margin-top: 15rpx;
			// margin-bottom: 15rpx;
			// background: linear-gradient(to top right, #fff, #FFFACD);
			border-radius: 20rpx; */
			// .mxText{
			// 	// text-align: center;
			// 	font-size: 40rpx;
			// 	text-align: center;
			// 	font-weight: bold;
			// 	// border-radius: 50%;
			// 	background: linear-gradient(to top right, #8B4500, #000000);
			// 	-webkit-background-clip: text;
			// 	/* 文字裁剪 */
			// 	color: transparent;
			// }
			
				
			.zpBox {
				margin-top: 5rpx;
				.item {
					padding: 50rpx;
					text-align: center;
					border-bottom: 1rpx solid #eeeeee;
				}
				// padding-left: 20rpx;
				// padding-right: 20rpx;
				
				// .zpItem {
				// 	margin-top: 20rpx;
				// 	height: 200rpx;
				// 	background: transparent;
				// 	border-radius: 30rpx;
				// 	// border: 10rpx solid transparent;
				// 	// box-shadow:
				// 	// -10rpx -10rpx 10rpx rgba(255, 255, 255, 0.2),
				// 	// 15rpx 15rpx 15rpx rgba(0, 0, 0, 0.1),
				// 	// inset -10rpx -10rpx 10rpx rgba(255, 255, 255, 0.2),
				// 	// inset 15rpx 15rpx 15rpx rgba(0, 0, 0, 0.1);
					
				// 	box-shadow:
				// 	-4rpx -4rpx 5rpx rgba(0, 0, 0, 0.1),
				// 	inset -4rpx -4rpx 5rpx rgba(0, 0, 0, 0.1),
				// 	10rpx 40rpx 40rpx rgba(0, 0, 0, 0.1);
					
				// 	.zpbt {
				// 		max-width: 200rpx;
				// 		background: linear-gradient(to top right, #FFDEAD, #f6c74f); //
				// 		border-bottom-right-radius: 30rpx;
				// 		border-top-left-radius: 30rpx;
				// 		text-align: center;
				// 	}
				// }
			}

			
		}
		
		

		// .body {
		// 	// flex: 1;
		// 	height: 100%;
		// 	background: #fff;
		// 	border-radius: 50rpx 50rpx 0 0;
		// 	border: 1rpx;
		// }
	}

	/* 点击时阴影逐渐消失 */
	.cardBox:active {
		transform: scale(0.97);
		box-shadow: 0 0 0 0 transparent;
	}
	
	/* 点击时阴影逐渐消失 */
	// .cardBoxTm:active {
	// 	transform: scale(0.97);
	// 	box-shadow: 0 0 0 0 transparent;
	// }
	
	
	


	@keyframes colorChange {

		0%,
		100% {
			--color1: #ff0000;
			/* 红色 */
			--color2: #ff8000;
			/* 橙色 */
		}

		10% {
			--color1: #ff8000;
			/* 橙色 */
			--color2: #ffff00;
			/* 黄色 */
		}

		20% {
			--color1: #ffff00;
			/* 黄色 */
			--color2: #80ff00;
			/* 黄绿色 */
		}

		30% {
			--color1: #80ff00;
			/* 黄绿色 */
			--color2: #00ff00;
			/* 绿色 */
		}

		40% {
			--color1: #00ff00;
			/* 绿色 */
			--color2: #00ff80;
			/* 青绿色 */
		}

		50% {
			--color1: #00ff80;
			/* 青绿色 */
			--color2: #00ffff;
			/* 青色 */
		}

		60% {
			--color1: #00ffff;
			/* 青色 */
			--color2: #0080ff;
			/* 蓝色 */
		}

		70% {
			--color1: #0080ff;
			/* 蓝色 */
			--color2: #0000ff;
			/* 深蓝色 */
		}

		80% {
			--color1: #0000ff;
			/* 深蓝色 */
			--color2: #8000ff;
			/* 紫色 */
		}

		90% {
			--color1: #8000ff;
			/* 紫色 */
			--color2: #ff00ff;
			/* 紫红色 */
		}
	}

	@property --color1 {
		syntax: "<color>";
		inherits: true;
		initial-value: #ff0000;
	}

	@property --color2 {
		syntax: "<color>";
		inherits: true;
		initial-value: #ffd700;
	}

	:root {
		--color1: #ff0000;
		--color2: #ffd700;
		--background-gradient: linear-gradient(-45deg, var(--color1), var(--color2));
		animation: colorChange 20s linear infinite;
	}

	.container {
		height: 200rpx;
		width: 80%;
	}

	.element {
		width: 300px;
		height: 300px;
		background: var(--background-gradient);
		border-radius: 50%;
		filter: blur(60px);
	}

	.logo {
		// position: absolute;
		width: 150px;
		top: 100px;
	}

	h1 {
		// margin-top: 60px;
		background: var(--background-gradient);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
		filter: brightness(70%);
	}

	p {
		margin: 0;
		color: var(--color1);
	}

	// .logo {
	// 	height: 200rpx;
	// 	width: 200rpx;
	// 	margin-top: 200rpx;
	// 	margin-left: auto;
	// 	margin-right: auto;
	// 	margin-bottom: 50rpx;
	// }

	// .text-area {
	// 	display: flex;
	// 	justify-content: center;
	// }

	// .title {
	// 	font-size: 36rpx;
	// 	color: #8f8f94;
	// }
</style>